<!--
 * @author czj
 * @date 2024-10-28 11:14
 * @description: 虚拟下拉列表
!-->
<template>
  <div class="virtual-select">
    <!-- <virtual-select
      :select-data="selectData"
      v-model="selectData.defaultValue"
      placeholder="请选择下拉数据"
      clearable
      @change="selectChange"
    /> -->
    <XnScroll
      v-model="selectData.defaultValue"
      :options="selectData.data"
      :props="{
        value: 'code',
        text: 'name',
        disabled: 'disabled',
      }"
      @change="selectChange"
    />
  </div>
</template>

<script>
import virtualSelect from '@/components/virtualSelect'
import XnScroll from '@/components/xnScroll.vue'
export default {
  components: {
    virtualSelect,
    XnScroll
  },
  data() {
    return {
      selectData: {
        defaultValue: '',
        data: [], // 下拉框数据
        label: 'name', // 下拉框需要显示的名称
        value: 'code', // 下拉框绑定的值
        isRight: false // 右侧是否显示
      }
    }
  },
  mounted() {
    // 测试数据
    for (let i = 0; i < 10000; i++) {
      this.selectData.data.push({ code: `code${i + 1}`, name: `数据${i + 1}` })
    }
  },
  methods: {
    selectChange(val) {
      console.log('下拉框选择的value值：', val)
    }
  }
}
</script>

<style lang="scss" scoped>
.virtual-select {
  height: 100%;
  padding: 12px;
}
</style>
